<script setup>
import { ref } from 'vue' 
import UploadAvatar from './component/UploadAvatar.vue'
//import RegisterComponent from './component/RegisterComponent.vue'
import { userUpdateAccountInfoService,userGetAccountInfoService,userUploadMessageService } from '@/api/user'
const formRef = ref()
const form = ref({})
const getUserInfo=async()=>
{
 const res= await userGetAccountInfoService(1)
 form.value=res.data.data
 console.log('个人信息',res.data.data);
}
getUserInfo()

const rules = ref({
  nickname: [
    { required: true, message: '请输入正确的用户名称', trigger: 'blur'},
    { min: 2,max: 10,message: '昵称长度在2-10个字符之间',trigger: 'blur'}
  ],
  phoneNumber: [
    { required: true, message: '请输入正确的电话号码', trigger: 'blur' },
    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,message:'手机号必须是11位数字',trigger: 'blur'
}
  ]
})

// const userStore = useUserStore()
const uploadRef = ref()
// const imgUrl = ref('')
const uploadFile = ref()
// const imgUrl = ref('')
let userImg=''
// const onUploadFile =async (uploadFile)=> {
  // imgUrl.value = URL.createObjectURL(uploadFile.raw)
  // const formData = new FormData()
  // formData.append('file',uploadFile)
//   const res=await userUploadMessageService(uploadFile)
//   console.log('999999999999999',res);
//   const reader = new FileReader()
//   reader.readAsDataURL(uploadFile.raw)
//   console.log("上传的文件",reader)
//   reader.onload = () => {
//     reader.value.data = reader.result

//     console.log('头像',reader.result);
//   }
// }
const submitForm = async () => {
  form.value.avatar = userImg
  await formRef.value.validate()
  await userUpdateAccountInfoService(form.value)
  
  const formData=new FormData()
  formData.append('01.jpg',userImg)
  setTimeout(()=>{
    console.log("url==================",userImg)
  },1000)
  // await userUploadMessageService()
  
  ElMessage.success('修改成功')
  console.log('123');
}
// const name = ref('')
// const phoneNum = ref('')


const getImg=(img)=>{
  setTimeout(()=>{
    console.log("获取到子组件",img)
  },500)
  userImg=img
}
</script>
<template>
  <div>
    <h1 class="title">修改信息</h1>
    <el-form ref="formRef" label-width="auto" :model="form" :rules="rules" style="width: 300px">
      <el-form-item class="avatar">
        <!-- <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="onUploadFile"
        >
        <div class="user">
           <img class="user-img" :src="imgUrl">
        </div>
        </el-upload> -->
      <upload-avatar @getImg="getImg"></upload-avatar>
      <!-- <register-component></register-component> -->
      </el-form-item>
      <el-form-item>
        <!-- <el-button  
          class="button" 
          color="#27bd9b" 
          @click="uploadRef.$el.querySelector('input').click()"
        >上传图片</el-button> -->
        
      </el-form-item>
      <el-form-item label="昵称:" class="item1" prop="nickname">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item label="手机号:" class="item2" prop="phoneNumber">
        <el-input v-model="form.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item class="item3">
        <el-button class="subBtn" width="300px" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.user{
  width:100px;
  height:100px;
  &-img{
    width:100%;
    height: 100%;
    border-radius:100%;
  }
}
.title {
  color: #27ba9b;
  font-size: 20px;
  font-family: "楷体","楷体_GB2312";
}
.avatar {
  margin-left: 50px;
}
.item1 {
    padding-top: 30px;
  }
.item2 {
  padding-top: 30px;
  
}
.button {
  margin-left: 120px;
}
.item3 {
  margin-left: 50px;
  padding-top: 30px;
  .subBtn {
    background: #27bd9b;
    width: 50%;
    color: #fff;
  }
}
.item-h3 {
  font-size: 13px;
  color: #a4b7b3;
}
.item-h2 {
  font-size: 13px;
  margin-bottom: 30px;
}
</style>